<template>
  <div>
    <h1 v-text="msg" ref="title"></h1>
    <button @click="showDom" ref="btn">获取上面的dom元素</button>
    <School
      ref="sch"
      id="sch"
    /><!-- 应用在组件标签上是此组件的组件实例对象（vc） -->
  </div>

  <!--
    ref属性
        1. 被用来给元素或子组件注册引用信息（id的替代者）
        2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
        3. 使用方式：
                1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
                2. 获取：```this.$refs.xxx``` -->
</template>


<script>
import School from "./components/School.vue";

export default {
  name: "App",
  components: {
    School,
  },
  data() {
    return {
      msg: "欢迎学习Vue!",
    };
  },
  methods: {
    showDom: function () {
      console.log(this.$refs.title); //值为h1真实的dom元素，ref相当于给元素打表识（id的替代者）
      console.log(this.$refs); //对象，key为ref标识的值，value为ref所在的真实dom元素，
      /* 若应用在组件标签上，value是此组件标签所对应的的组件实例对象（vc） */
      console.log(document.getElementById("sch"));
      /* 若给组件标签打上id属性，再用document.getElementById则得到的为School组件中template标签下的最外层div元素
       */
    },
  },
};
</script>

<style>
</style>